<template>
  <div style="width: 100%;height: 100%;">
    <div v-show="visibleFlag">
      <div class="uploadTop"></div>
      <div>
        <canvas style="display: none;" ref="canvasDom"></canvas>
        <video class="camera_video" ref="videoDom"></video>
      </div>
      <div class="uploadBottom">
        <p @click="hideModal" style="color: #fff;font-size: 16px;cursor: pointer;">取消</p>
        <svg type="info" @click="takePhoto" t="1715164935090" class="icon" viewBox="0 0 1032 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4303" width="50" height="50"><path d="M512 1024C229.236953 1024 0 794.784665 0 512 0 229.236953 229.236953 0 512 0c282.763047 0 512 229.236953 512 512 0 282.763047-229.215335 512-512 512z m0-68.247931c245.082925 0 443.752069-198.669144 443.752069-443.752069 0-245.061307-198.669144-443.730451-443.752069-443.730451-245.061307 0-443.730451 198.669144-443.730451 443.730451 0 245.082925 198.669144 443.752069 443.730451 443.752069z m0-47.797332C293.355852 907.954737 116.045263 730.687384 116.045263 512c0-218.665766 177.267353-395.954737 395.954737-395.954737S907.954737 293.312616 907.954737 512 730.687384 907.954737 512 907.954737z" fill="#fff" p-id="4304"></path></svg>
        <svg t="1715172472721" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6327" width="20" height="20"><path d="M42.649579 511.999744c23.551988 0 42.700779 19.09759 42.700778 42.649579l8.499196 42.700778h-8.550396 8.550396a426.802987 426.802987 0 0 0 836.300382 0h86.783957C976.281112 839.52598 765.695617 1023.999488 511.999744 1023.999488a511.487744 511.487744 0 0 1-426.700587-228.915086v15.564793a42.649579 42.649579 0 1 1-85.299157 0v-255.999872c0-23.551988 19.09759-42.649579 42.649579-42.649579z m887.500356-85.350357h8.499196v-0.0512l-8.499196 0.0512a426.802987 426.802987 0 0 0-836.300382 0H7.065596C47.718376 184.473508 258.303871 0 511.999744 0a511.487744 511.487744 0 0 1 426.700587 228.915086v-15.564793a42.649579 42.649579 0 1 1 85.299157 0v255.999872a42.649579 42.649579 0 0 1-85.350357 0l-8.499196-42.700778z" fill="#ffffff" p-id="6328"></path></svg>
      </div>
    </div>
    <div v-show="visibleFlag==false" style="width: 100%;height: 100%;">
      <div class="uploadTop"></div>
      <img :src="imgurl" class="camera_video"/>
      <div class="uploadBottom">
        <p @click="hideModal" style="color: #fff;font-size: 16px;cursor: pointer;">取消</p>
        <svg @click="cancel" t="1715174542540" class="backIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="61224" width="32" height="32"><path d="M622.650611 284.901749 447.745069 284.901749 447.745069 142.823869 63.980685 334.705038l383.76336 191.882192L447.744046 384.834762l189.391465 0c149.914358 0 224.855164 62.789045 224.855164 188.368158 0 129.928165-77.435627 194.876386-232.338602 194.876386L187.952184 768.079306l0 99.93199L634.146433 868.011296c211.184817 0 316.777737-95.104031 316.777737-285.311071C950.924169 384.178823 841.510224 284.901749 622.650611 284.901749z" fill="#272636" p-id="61225"></path></svg>
        <p style="color: #fff;font-size: 16px;cursor: pointer;" @click="save">确定</p>
      </div>
    </div>
  </div>
</template>

<script setup >
  import { emit } from "process";
  import { ref, nextTick, onMounted } from "vue";
  import { useRouter } from "vue-router";
  const router=useRouter()
  // canvas控件对象
  const canvasDom = ref(null);
  // video 控件对象
  const videoDom = ref(null);
  // 照片路径
  const imgurl = ref(null);

  const showCanvas=defineProps({
    showCanvas:Boolean
  });
  const emits = defineEmits(['hideModal','save']);

  // ------------------ 显示，关闭 ------------------
  // 显示
  const visibleFlag = ref(true);

  // 关闭
  const cancel=()=>{
    visibleFlag.value = true;
    openCamera()
  }

  //取消
  const hideModal=()=>{
    stop()
    emits("hideModal", false)
    
  }

  //确定
  const save=()=>{
    emits("save",imgurl.value,false)
    stop()
    visibleFlag.value = true
    // imgurl.value=""
    openCamera()
    router.push('/release');
     console.log(imgurl.value);
  }

  const openCamera = () => {
    // 检测浏览器是否支持mediaDevices
    if (navigator.mediaDevices) {
      // 开启视频，关闭音频
      navigator.mediaDevices.getUserMedia({audio: false, video: true})
      .then((stream) => {
        // 将视频流传入viedo控件
        videoDom.value.srcObject = stream;
        // 播放
        videoDom.value.play();
      })
      .catch((err) => {
        console.log(err);
      });
    } else {
      window.alert("该浏览器不支持开启摄像头，请更换最新版浏览器");
    }
  };

  // 拍照
  const takePhoto = () => {
    // 如果已经拍照了就重新启动摄像头
    if (imgurl.value) {
      imgurl.value = null;
      openCamera()
      return;
    }
    // 设置画布大小与摄像大小一致
    canvasDom.value.width = videoDom.value.videoWidth;
    canvasDom.value.height = videoDom.value.videoHeight;
    // 执行画的操作
    canvasDom.value.getContext("2d").drawImage(videoDom.value, 0, 0);
    // 将结果转换为可展示的格式
    imgurl.value = canvasDom.value.toDataURL("image/webp");
    // 关闭摄像头
    stop();
    nextTick(() => {
      visibleFlag.value = false;
    })
  }

  // 关闭摄像头
  const stop = () => {
    let stream = videoDom.value.srcObject;
    if (!stream) return;
    let tracks = stream.getTracks();
    tracks.forEach((x) => {
      x.stop();
    });
  };

  onMounted(()=>{
    if(showCanvas.showCanvas==true){
      openCamera()
    }
  })

</script>

<style  scoped>
.uploadTop{
  width: 100%;
  height: 100px;
  background-color: #000;
}
.camera_video {
  width: 100%;
  height: 400px;
}
.uploadBottom{
  width: 100%;
  height: 160px;
  background-color: #000;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.backIcon{
  background-color: #fff;
  border-radius: 50px;
  padding: 10px;
}
</style>

